<template>
    <view class="page__bd">
        <view class="hb-bar bg-white solid-bottom">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                按钮形状
            </view>
            <view class="action">
            </view>
        </view>
        <view class="padding flex flex-wrap justify-between align-center bg-white">
            <button class="hb-btn">默认</button>
            <button class="hb-btn round">圆角</button>
            <button class="hb-btn hb-icon">
                <text class="hb-icon_cameraadd"></text>
            </button>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top ">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                按钮尺寸
            </view>
            <view class="action">
                操作
            </view>
        </view>
        <view class="padding flex flex-wrap justify-between align-center bg-white">
            <button class="hb-btn round sm ">小尺寸</button>
            <button class="hb-btn round">默认</button>
            <button class="hb-btn round lg">大尺寸</button>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top ">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                按钮颜色
            </view>
        </view>
        <view class="grid col-4 padding-sm">
            <view class="margin-tb-sm text-center">
                <button class="hb-btn hb-btn_success shadow" type="">success</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="hb-btn hb-btn_error">error</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="hb-btn hb-btn_warning" type="">warning</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="hb-btn hb-btn_default shadow">default(有阴影)</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="hb-btn hb-btn_primary" type="">primary</button>
            </view>
            <view class="margin-tb-sm text-center">
                <button class="hb-btn hb-btn_info" type="">info</button>
            </view>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top ">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                无效状态
            </view>
        </view>
        <view class="padding flex flex-wrap justify-between align-center bg-white">
            <button class="hb-btn hb-btn_primary" disabled type="">无效状态</button>
            <button class="hb-btn" disabled>无效状态</button>
        </view>
        <view class="hb-bar bg-white solid-bottom margin-top ">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                按钮加图标
            </view>
            <view class="action">
                操作
            </view>
        </view>
        <view class="padding-xl bg-white">
            <button class="hb-btn block hb-btn_primary margin-tb-sm lg">
                <text class="hb-icon_loading hb-iconfont_spin"></text> 加载</button>
            <button class="hb-btn block hb-btn_info margin-tb-sm lg" loading> 原生加载</button>
        </view>
    </view>
</template>

<script>
</script>

<style>
</style>
